Motion >> Repos - motion-next.git/blob

   1 <div id="contacts" class="page-layout simple left-sidenav inner-sidenav">
   2   <!-- HEADER -->
   3   <div
   4     class="header md-accent-bg"
   5     layout="row"
   6     layout-align="space-between center"
   7   >
   8     <!-- APP TITLE -->
   9     <div layout="row" layout-align="start center">
  10       <div class="logo" layout="row" layout-align="start center">
  11         <span class="logo-icon">
  12           <md-icon md-font-icon="icon-account-multiple" class="s24"></md-icon>
  13         </span>
  14         <span class="logo-text" translate="CONTACTMANAGER.CONTACTS"
  15           >Contacts</span
  16         >
  17       </div>
  18     </div>
  19     <!-- / APP TITLE -->
  20
  21     <!-- SEARCH -->
  22     <div class="search-input-wrapper" layout="row" layout-align="start center">
  23       <label for="search">
  24         <md-icon md-font-icon="icon-magnify"></md-icon>
  25       </label>
  26       <md-input-container md-no-float class="m-0">
  27         <input
  28           id="search"
  29           placeholder="Search for anyone"
  30           type="text"
  31           ng-model="vm.query.filter"
  32           ng-model-options="{ debounce: 1000 }"
  33           translate
  34           translate-attr-placeholder="CONTACTMANAGER.SEARCH_FOR_ANYONE"
  35         />
  36       </md-input-container>
  37     </div>
  38     <!-- / SEARCH -->
  39   </div>
  40   <!-- / HEADER -->
  41
  42   <!-- SELECTED BAR -->
  43   <div
  44     ng-show="vm.selectedContacts.length > 0"
  45     class="selected-bar header animate-slide-down md-accent-bg"
  46     layout="row"
  47     layout-align="start center"
  48   >
  49     <div class="close-button-wrapper" ng-click="vm.selectedContacts =[]">
  50       <md-button layout="row" layout-align="start center">
  51         <md-icon md-font-icon="icon-arrow-left" class="mr-8"></md-icon>
  52         <span translate="CONTACTMANAGER.BACK">Back</span>
  53       </md-button>
  54     </div>
  55
  56     <div flex layout="row" layout-align="space-between center">
  57       <div>
  58         <span class="selected-contacts-count">
  59           <span>{{vm.selectedContacts.length}}</span>
  60           <span translate="CONTACTMANAGER.SELECTED">selected</span>
  61         </span>
  62
  63         <md-menu class="select-menu" ng-if="!vm.currentThread">
  64           <md-button
  65             class="md-icon-button"
  66             ng-click="$mdOpenMenu($event)"
  67             aria-label="multi select toggle"
  68             translate
  69             translate-attr-aria-label="CONTACTS.MULTI_SELECT_TOGGLE"
  70           >
  71             <md-icon md-font-icon="icon-menu-down"></md-icon>
  72           </md-button>
  73           <md-menu-content width="3">
  74             <md-menu-item>
  75               <md-button
  76                 ng-click="vm.selectAllContacts()"
  77                 translate="CONTACTMANAGER.SELECT_ALL"
  78               >
  79                 Select all
  80               </md-button>
  81             </md-menu-item>
  82             <md-menu-item>
  83               <md-button
  84                 ng-click="vm.deselectContacts()"
  85                 translate="CONTACTMANAGER.SELECT_NONE"
  86               >
  87                 Select none
  88               </md-button>
  89             </md-menu-item>
  90           </md-menu-content>
  91         </md-menu>
  92       </div>
  93
  94       <div class="multi-select-actions">
  95         <button
  96           class="md-icon-button"
  97           ng-csv="vm.exportSelectedContacts"
  98           csv-label="true"
  99           filename="contacts.csv"
 100         >
 101           <md-icon md-font-icon="icon-file-excel"></md-icon>
 102         </button>
 103         <md-button
 104           ng-if="vm.crudPermissions.canDelete"
 105           class="md-icon-button"
 106           ng-click="vm.deleteSelectedContacts($event)"
 107           aria-label="delete selected"
 108           translate
 109           translate-attr-label="CONTACTS.DELETE_SELECTED"
 110         >
 111           <md-icon md-font-icon="icon-delete"></md-icon>
 112         </md-button>
 113       </div>
 114     </div>
 115   </div>
 116   <!-- / SELECTED BAR -->
 117
 118   <!-- CONTENT -->
 119   <div class="content" md-background-bg layout="row" layout-align="start start">
 120     <!-- MAIN -->
 121     <div class="main scrollable" ms-scroll>
 122       <div layout="row">
 123         <div class="column" flex="20">
 124           <md-card>
 125             <md-card-content>
 126               <button
 127                 layout-align="center center"
 128                 md-mini-fab
 129                 ng-click="vm.selectedList = null; vm.selectedCompany = null; vm.selectedTags = []"
 130               >
 131                 <md-icon md-font-icon="icon-refresh"></md-icon>{{
 132                 'CONTACTMANAGER.ALL_CONTACTS' | translate }}
 133               </button>
 134             </md-card-content>
 135           </md-card>
 136           <md-card>
 137             <md-card-content>
 138               <md-input-container class="md-block" flex-gt-sm="">
 139                 <label translate="CONTACTMANAGER.SELECT_LIST"
 140                   >Select a list</label
 141                 >
 142                 <md-select
 143                   placeholder="Select a list"
 144                   ng-model="vm.selectedList"
 145                   ng-disabled="vm.lists.count === 0"
 146                 >
 147                   <md-option ng-value="null"
 148                     ><em translate="CONTACTMANAGER.ALL">All</em></md-option
 149                   >
 150                   <md-option
 151                     ng-value="list.id"
 152                     ng-repeat="list in vm.lists.rows"
 153                     >{{list.name}}</md-option
 154                   >
 155                 </md-select>
 156               </md-input-container>
 157             </md-card-content>
 158           </md-card>
 159           <md-card>
 160             <md-card-content>
 161               <md-input-container class="md-block" flex-gt-sm="">
 162                 <label translate="CONTACTMANAGER.SELECT_COMPANY"
 163                   >Select a company</label
 164                 >
 165                 <md-select
 166                   placeholder="Select a company"
 167                   flex="100"
 168                   ng-model="vm.selectedCompany"
 169                   ng-disabled="vm.companies.count === 0"
 170                 >
 171                   <md-option ng-value="null"
 172                     ><em translate="CONTACTMANAGER.ALL">All</em></md-option
 173                   >
 174                   <md-option
 175                     ng-value="company.id"
 176                     ng-repeat="company in vm.companies.rows"
 177                     >{{company.name}}</md-option
 178                   >
 179                 </md-select>
 180               </md-input-container>
 181             </md-card-content>
 182           </md-card>
 183           <md-card>
 184             <md-card-content>
 185               <md-input-container class="md-block" flex-gt-sm="">
 186                 <label translate="CONTACTMANAGER.SELECT_TAGS"
 187                   >Select one or more tags</label
 188                 >
 189                 <md-select
 190                   multiple
 191                   placeholder="Select one or more tags"
 192                   flex="100"
 193                   ng-model="vm.query.tag"
 194                   ng-change="vm.getContacts()"
 195                 >
 196                   <md-option ng-value="tag.id" ng-repeat="tag in vm.tags.rows"
 197                     >{{tag.name}}</md-option
 198                   >
 199                 </md-select>
 200               </md-input-container>
 201             </md-card-content>
 202           </md-card>
 203         </div>
 204
 205         <!-- USER TABLE -->
 206         <md-card flex="80">
 207           <md-table-container ng-init="vm.getAssignedCompanies()">
 208             <table
 209               md-table
 210               md-row-select
 211               multiple
 212               ng-model="vm.selectedContacts"
 213               md-progress="vm.promise"
 214             >
 215               <thead
 216                 md-head
 217                 md-order="vm.query.sort"
 218                 md-on-reorder="vm.getContacts"
 219               >
 220                 <tr md-row>
 221                   <th md-column md-order-by="id">ID</th>
 222                   <th md-column md-order-by="firstName">
 223                     {{'CONTACTMANAGER.FULLNAME' | translate}}
 224                   </th>
 225                   <th md-column md-order-by="phone">
 226                     {{'CONTACTMANAGER.PHONE' | translate}}
 227                   </th>
 228                   <th md-column md-order-by="email">
 229                     {{'CONTACTMANAGER.EMAIL' | translate}}
 230                   </th>
 231                   <th md-column md-order-by="createdAt">
 232                     {{'CONTACTMANAGER.CREATED_AT' | translate}}
 233                   </th>
 234                   <th md-column md-order-by="ListId">
 235                     {{'CONTACTMANAGER.LIST' | translate}}
 236                   </th>
 237                   <th md-column md-order-by="CompanyId">
 238                     {{'CONTACTMANAGER.COMPANY' | translate}}
 239                   </th>
 240                   <th md-column md-order-by="tags">
 241                     {{'CONTACTMANAGER.TAGS' | translate}}
 242                   </th>
 243                   <th md-column width="10px"></th>
 244                 </tr>
 245               </thead>
 246               <tbody md-body>
 247                 <tr md-row ng-hide="vm.contacts.rows.length">
 248                   <td md-cell colspan="8">
 249                     <div layout="row" layout-align="center center">
 250                       <span translate="CONTACTMANAGER.NO_AVAILABLE_INFO"
 251                         >No Available Info</span
 252                       >
 253                     </div>
 254                   </td>
 255                 </tr>
 256                 <tr
 257                   md-row
 258                   md-select="contact"
 259                   md-select-id="id"
 260                   ng-repeat="contact in vm.contacts.rows"
 261                 >
 262                   <td
 263                     ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editdialog(contact, ev) : vm.createOrEditContact($event, contact)"
 264                     md-cell
 265                     class="id"
 266                   >
 267                     {{contact.id}}
 268                   </td>
 269                   <td
 270                     ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editdialog(contact, ev) : vm.createOrEditContact($event, contact)"
 271                     md-cell
 272                     class="firstName"
 273                   >
 274                     {{contact.firstName}} {{contact.lastName}}
 275                   </td>
 276                   <td
 277                     ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editdialog(contact, ev) : vm.createOrEditContact($event, contact)"
 278                     md-cell
 279                     class="phone"
 280                   >
 281                     {{contact.phone}}
 282                   </td>
 283                   <td
 284                     ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editdialog(contact, ev) : vm.createOrEditContact($event, contact)"
 285                     md-cell
 286                     class="email"
 287                   >
 288                     {{contact.email}}
 289                   </td>
 290                   <td
 291                     ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editdialog(contact, ev) : vm.createOrEditContact($event, contact)"
 292                     md-cell
 293                     class="createdAt"
 294                   >
 295                     {{contact.createdAt | date:'medium'}}
 296                   </td>
 297                   <td
 298                     ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editdialog(contact, ev) : vm.createOrEditContact($event, contact)"
 299                     md-cell
 300                     class="list"
 301                   >
 302                     {{vm.listsMap[contact.ListId]}}
 303                   </td>
 304                   <td
 305                     ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editdialog(contact, ev) : vm.createOrEditContact($event, contact)"
 306                     md-cell
 307                     class="company"
 308                   >
 309                     {{vm.companiesMap[contact.CompanyId]}}
 310                   </td>
 311                   <td md-cell class="tag">
 312                     <div ng-if="contact.Tags.length">
 313                       <div
 314                         ng-if="contact.Tags.length == 1"
 315                         layout="column"
 316                         layout-align="center center"
 317                       >
 318                         <md-icon
 319                           md-font-icon="icon-tag"
 320                           ng-style="{'color': contact.Tags[0].color }"
 321                         ></md-icon>
 322                         <span class="text-truncate"
 323                           >{{contact.Tags[0].name}}</span
 324                         >
 325                       </div>
 326                       <div
 327                         ng-if="contact.Tags.length > 1"
 328                         layout="column"
 329                         layout-align="center center"
 330                       >
 331                         <md-tooltip md-direction="left" layout="row">
 332                           <span ng-repeat="tag in contact.Tags"
 333                             >{{tag.name}}<span ng-if="!$last">, </span></span
 334                           >
 335                         </md-tooltip>
 336                         <md-icon md-font-icon="icon-tag"></md-icon>
 337                       </div>
 338                     </div>
 339                   </td>
 340                   <td
 341                     md-cell
 342                     class="actions"
 343                     ng-if="!vm.crudPermissions.readOnly"
 344                   >
 345                     <md-menu>
 346                       <md-button
 347                         class="md-icon-button"
 348                         aria-label="More"
 349                         translate
 350                         translate-attr-aria-label="CONTACTMANAGER.MORE"
 351                         ng-click="$mdOpenMenu($event)"
 352                       >
 353                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 354                       </md-button>
 355
 356                       <md-menu-content width="3">
 357                         <md-menu-item ng-if="vm.crudPermissions.canEdit">
 358                           <md-button
 359                             ng-click="vm.editdialog(contact, ev)"
 360                             translate="CONTACTMANAGER.EDIT_CONTACT"
 361                           >
 362                             Edit Contact
 363                           </md-button>
 364                         </md-menu-item>
 365                         <md-menu-item ng-if="vm.crudPermissions.canEdit">
 366                           <md-button
 367                             ng-click="vm.mergeContact(ev, contact)"
 368                             translate="CONTACTMANAGER.MERGE_CONTACT"
 369                           >
 370                             Merge Contact
 371                           </md-button>
 372                         </md-menu-item>
 373                         <md-menu-item ng-if="vm.crudPermissions.canEdit">
 374                           <md-button
 375                             ng-click="vm.duplicateContact(ev, contact)"
 376                             translate="CONTACTMANAGER.DUPLICATE_CONTACT"
 377                           >
 378                             Duplicate Contact
 379                           </md-button>
 380                         </md-menu-item>
 381                         <md-menu-divider
 382                           ng-if="vm.crudPermissions.canEdit && vm.crudPermissions.canDelete"
 383                         >
 384                         </md-menu-divider>
 385                         <md-menu-item ng-if="vm.crudPermissions.canDelete">
 386                           <md-button
 387                             ng-click="vm.deleteconfirm(contact, ev)"
 388                             translate="CONTACTMANAGER.DELETE_CONTACT"
 389                           >
 390                             Delete Contact
 391                           </md-button>
 392                         </md-menu-item>
 393                       </md-menu-content>
 394                     </md-menu>
 395                   </td>
 396                 </tr>
 397               </tbody>
 398             </table>
 399           </md-table-container>
 400
 401           <md-table-pagination
 402             md-label="{page: '{{'CONTACTMANAGER.PAGE' | translate}}:', rowsPerPage: '{{'CONTACTMANAGER.ROWSPERPAGE' | translate}}:', of: '{{'CONTACTMANAGER.OF' | translate}}'}"
 403             md-limit="vm.query.limit"
 404             md-limit-options="[10, 15, 20, 50, 100, 250]"
 405             md-page="vm.query.page"
 406             md-total="{{vm.contacts.count}}"
 407             md-on-paginate="vm.getContacts"
 408             md-page-select
 409           ></md-table-pagination>
 410         </md-card>
 411         <!-- / USER TABLE -->
 412       </div>
 413     </div>
 414     <!-- / MAIN -->
 415   </div>
 416   <!-- / CONTENT -->
 417
 418   <!-- ADD USER BUTTON -->
 419   <md-fab-speed-dial
 420     id="add-contact-button"
 421     ng-if="vm.crudPermissions.canEdit"
 422     ng-hide="vm.options.hidden"
 423     md-direction="up"
 424     md-open="vm.options.isOpen"
 425     class="md-scale md-fab"
 426     ng-class="{ 'md-hover-full': vm.options.hover }"
 427     ng-mouseenter="vm.options.isOpen=true"
 428     ng-mouseleave="vm.options.isOpen=false"
 429   >
 430     <md-fab-trigger>
 431       <md-button aria-label="menu" class="md-fab md-accent">
 432         <md-icon md-font-icon="icon-plus"></md-icon>
 433       </md-button>
 434     </md-fab-trigger>
 435     <md-fab-actions>
 436       <md-button
 437         class="md-fab md-mini md-warn"
 438         flow-btn
 439         flow-init="vm.ngFlowOptions"
 440         flow-files-submitted="$flow.upload()"
 441         flow-file-success="vm.importContacts($file, $message, $flow)"
 442         flow-file-added="vm.fileAdded($file)"
 443         aria-label="Select File"
 444         translate
 445         translate-attr-aria-label="CONTACTMANAGER.IMPORT_CONTACTS"
 446       >
 447         <md-tooltip
 448           md-direction="left"
 449           md-visible="tooltipVisible"
 450           md-autohide="false"
 451         >
 452           {{'CONTACTMANAGER.IMPORT_CONTACTS' | translate}}
 453         </md-tooltip>
 454         <md-icon md-font-icon="icon-upload"></md-icon>
 455       </md-button>
 456       <md-button
 457         class="md-fab md-mini md-accent"
 458         ng-click="vm.createOrEditContact($event)"
 459         aria-label="add contact"
 460         translate
 461         translate-attr-aria-label="CONTACTMANAGER.ADD_CONTACT"
 462       >
 463         <md-tooltip
 464           md-direction="left"
 465           md-visible="tooltipVisible"
 466           md-autohide="false"
 467         >
 468           {{'CONTACTMANAGER.ADD_CONTACT' | translate}}
 469         </md-tooltip>
 470         <md-icon md-font-icon="icon-account-plus"></md-icon>
 471       </md-button>
 472     </md-fab-actions>
 473   </md-fab-speed-dial>
 474   <!-- / ADD USER BUTTON -->
 475 </div>